<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style>

    * { margin: 0px !important; padding: 0px !important; }

    div {
        width: 100px;
        font-size: 10px;
        font-family: Ahem;
        padding: 10px !important;
    }

    section.reference { text-align: left !important; }
    section.reference > div { white-space: pre; }

</style>
</head>
<body>

<section class="reference" style="text-align: right; color: #f00;">
    <div style="background: #fdd;">  xx xx xx<br />      xxxx</div>
    <div style="background: #fdd;">  xx xx xx<br />xxxxxxxxxxxxx</div>
    <div style="background: #fdd;">xxxxxxxxxxxxx<br />  xx xx xx<br />      xxxx</div>
</section>

<section class="reference" style="text-align: center; color: #0f0;">
    <div style="background: #dfd;"> xx xx xx <br />   xxxx   </div>
    <div style="background: #dfd;"> xx xx xx <br />xxxxxxxxxxxxx</div>
    <div style="background: #dfd;">xxxxxxxxxxxxx<br /> xx xx xx <br />   xxxx   </div>
</section>

<section class="reference" style="text-align: justify; color: #00f;">
    <div style="background: #ddf;">xx  xx  xx<br />xxxx</div>
    <div style="background: #ddf;">xx  xx  xx<br />xxxxxxxxxxxxx</div>
    <div style="background: #ddf;">xxxxxxxxxxxxx<br />xx  xx  xx<br />xxxx      </div>
</section>
</body>
</html>

